/**
 * 设备筛选
 */
import React from 'react';
import { Button, Input, Select } from 'antd';
import Filter, { styles } from '../../../components/filter';

const options = [
	{ name: '供应商名称', value: 'name' },
];

class DeviceFilter extends Filter {
	state = {
		key: 'name',
		keyWord: ''
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.visible && !nextProps.visible) {
			this.reset();
		}
	}

	defaultState = { ...this.state }

	pretreatment(data) {
		if (data.keyWord) {
			data[data.key] = data.keyWord;
			delete data.key;
			delete data.keyWord;
		}
		return data;
	}

	render() {
		const { key, keyWord } = this.state;
		return (
			<div style={styles.searchBox}>
				<Select style={styles.select} value={key} onChange={key => this.setState({ key })}>
					{options.map(o => <Option value={o.value}>{o.name}</Option>)}
				</Select>
				<Input placeholder="输入关键字" style={styles.input} value={keyWord} onChange={e => this.setState({ keyWord: e.target.value })} />

				<div style={styles.s}>
					<Button
						type="primary"
						style={styles.but}
						onClick={this.search}
						icon="search"
						className="search"
					>搜索</Button>
					<Button onClick={this.reset} icon="sync">重置</Button>
				</div>
			</div>
		);
	}
}

export default DeviceFilter;
